<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-03-04 15:29:05
 * @LastEditors: Ansel
 * @LastEditTime: 2020-03-24 16:19:29
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        // 防抖
        // deBounce = function(fn , time){
        //     var timer;
        //     return function(){
        //         if(timer){
        //             clearTimeout(timer);//清除之前的定时器
        //         }
        //         var args = arguments;
                
        //         timer = setTimeout(function(){
        //             fn.apply(null, args);
        //         },time);
        //     }
        // }
        // var debounce = deBounce(function(value){
        //     console.log("已搜索"+ value);
        // },1000);
        // const input = document.querySelector("input");
        // input.oninput = function(){
        //     debounce(this.value);
        // }
        var deBounce = function(fn ,time){
            var timer;
            return function(){
                if(timer){
                    clearTimeout(timer);
                }
                var args = [].slice.call(arguments);
                timer = setTimeout(function(){
                    fn.apply(null,args);
                },time);
            }
        }
        var debounce = deBounce(function(value){
            console.log(value);
        },1000);
        const input = document.querySelector("input");
        input.oninput = function(){
            debounce(this.value);
        }

        // 节流
        // var throttle = function(fn ,time){
        //     var timer;
        //     return function(){
        //         if(timer){
        //             return;
        //         }
        //         var args = [].slice.call(arguments);
        //         timer = setTimeout(function(){
        //             fn.apply(null,args);
        //             timer = null;
        //         },time);
        //     }
        // }

        // var throttle = function(fn,time){
        //     var t;
        //     return function(){
        //         if(!t || Date.now()- t > time){
        //             fn.apply(null,arguments);
        //             t = Date.now();
        //         }
        //     }
        // }

        //定时器型
        // var throttle = function(fn, time){
        //     var timer;
        //     return function(){
        //         if(timer){
        //             return;
        //         }
        //         var args = arguments;
        //         timer = setTimeout(function(){
        //             fn.apply(null, args);
        //             timer = null;
        //         },time);
        //     }
        // }
        //时间戳型
        // var throttle = function(fn, time){
        //     var t;
        //     return function(){
        //         if(!t || Date.now() - t > time){
        //             fn.apply(null,arguments);
        //             t = Date.now();
        //         }
        //     }
        // }
        // var myThrottle = throttle(function(){
        //     console.log("窗口滑动");
        // },1000);
        // window.onresize = function(){
        //     myThrottle();
        // }

        //函数防抖：完成动作之后隔一段时间执行
        //函数节流：每隔一段时间运行一次
    </script>
</body>
</html>